<template>
  <view class="body flex-col">
    <u-sticky>
      <u-tabs
        :list="list"
        lineWidth="30"
        :scrollable="false"
        itemStyle="padding-left: 14rpx; padding-right: 14rpx; height: 90rpx;"
        active-color="#F0250E"
        inactive-color="#000"
        @change="tabChange"
        :current="current"
        style="background-color: #fff"
      ></u-tabs>
    </u-sticky>
    <scroll-view scroll-y @scrolltolower="lower" class="page-content flex-h-1">
      <view v-if="detailList.length > 0">
        <view class="list" v-for="(item, index) in detailList" :key="index">
          <view class="list_content">
            <view class="left">
              <view class="left_title">{{ item.desc }}</view>
              <text class="left_time">{{
                getDate(item.created_at * 1000)
              }}</text>
            </view>
            <view class="right">
              <view class="price"
                >{{ item.type == 1 ? "+" : "-" }}{{ item.amount }}</view
              >
              <!-- <text class="daozhang">{{
            item.is_daozhang == 0 ? "未到账" : "已到账"
          }}</text> -->
            </view>
          </view>
        </view>
        <u-loadmore :status="status"></u-loadmore>
      </view>
      <u-empty v-else mode="data"> </u-empty>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      pageNo: 1,
      status: "loadmore",
      list: [
        {
          name: "全部",
        },
        {
          name: "收入",
        },
        {
          name: "支出",
        },
      ],
      detailList: [],
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    tabChange(e) {
      this.current = e;
      this.pageNo = 1;
      this.getList();
    },
    async lower() {
      if (this.status == "nomore") return;
      const res = await this.$allrequest.distribution.getCashDetailList(
        {
          page: this.pageNo,
          type: this.current,
        },
        true
      );
      this.detailList.push(...res.data.list);
      this.status = res.data.data.length <= 10 ? "nomore" : "loadmore";
      this.pageNo++;
    },
    getDate(val) {
      var date = new Date(val);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟
      let second = date.getSeconds(); // 获取秒数
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // var currentdate = year + seperator1 + month + seperator1 + strDate;
      var currentdate =
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      return currentdate;
    },
    async getList() {
      const res = await this.$allrequest.distribution.getCashDetailList(
        {
          type: this.current,
          pageNo: this.pageNo,
        },
        true
      );
      if (res.code == 0) {
        this.detailList = res.data.data;
        this.status = res.data.data.length <= 10 ? "nomore" : "loadmore";
        this.pageNo++;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #f5f5f5;

  .list {
    padding: 0 24rpx;
    .list_content {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f8f8f8;
      .left {
        width: 468rpx;
        .left_title {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .left_time {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        .price {
          font-size: 28rpx;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .daozhang {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>
